<template>
	<div class="banner">
		<div class="banner-top">
			<img src="../../../../public/userimg/1-1.png">
			<router-link to="/login">
				<h3>去登录/注册</h3>
				<p>新用户注册送388元大礼包</p>
			</router-link>
		</div>
		<div class="banner-bottom">
			<img src="../../../../public/userimg/1-2.png">
			<img class="tu" src="../../../../public/userimg/1-7.png">
			<em>未获得</em>
			<h3>游侠风户外会员</h3>
			<p>全站200+户外线路免费畅玩</p>
			<router-link to="/login">
				<span>立即开通</span>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Banner'
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.banner{
		position: relative;
		width: 100%;
		height: 4.2rem;
		background-size: 100% 100%;
		background-image: url(../../../../public/userimg/1-8.png);
	}
	.banner-top{
		display: flex;
		position: relative;
	}
	.banner-top img{
		width: 2rem;
		height: 2rem;
		margin-top: 1rem;
		margin-left: .5rem;
		border-radius: 1rem;
	}
	.banner-top h3{
		width: 100%;
		line-height: 4.2rem;
		font-weight: bold;
		font-size: 20px;
		margin-left: .5rem;
	}
	.banner-top p{
		width: 45%;
		left: 2.5rem;
		font-weight: bold;
		bottom: .8rem;
		height: .8rem;
		border-radius: .4rem;
		line-height: .8rem;
		text-align: center;
		position: absolute;
		color: white;
		background-image: linear-gradient(to right,#ff6202,#ffa12b);
	}
	.banner-bottom{
		width: 100%;
	}
	.banner-bottom img:first-child{
		position: absolute;
		top: 3.5rem;
		left: .5rem;
		width: 90%;
	}
	.banner-bottom .tu{
		width: 1.6rem;
		position: absolute;
		top: 3.9rem;
		left: .8rem;
	}
	.banner-bottom em{
		position: absolute;
		background-color: #c2c2c2;
		top: 3.5rem;
		width: 15%;
		line-height: .5rem;
		color: white;
		font-weight: bold;
		text-align: center;
		left: .5rem;
		border-radius: 0.2rem 0 0.2rem 0;
		height: .5rem;
	}
	.banner-bottom h3{
		position: absolute;
		color: #fef6a2;
		left: 2.5rem;
		top: 4rem;
		font-size: .4rem;
	}
	.banner-bottom p{
		position: absolute;
		color: #FEF6A2;
		left:2.5rem;
		top: 4.5rem;
	}
	.banner-bottom span{
		position: absolute;
		background-color: #ffe595;
		left:7.5rem;
		top: 3.8rem;
		width: 15%;
		border-radius: .3rem;
		line-height: .5rem;
		height: .5rem;
		text-align: center;
	}

</style>
